<template>
    <div>
        <!--搜索  -->
        <template>
            <el-form :inline="true" :model="projectAllForm" :rules="projectAllFormRules" ref="projectAllFormRules">
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="项目编号">
                            <el-input v-model="projectAllForm.projectNo"></el-input>
                        </el-form-item>
                        <el-form-item label="项目名称">
                            <el-input v-model="projectAllForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="项目类型">
                            <el-select v-model="projectAllForm.type" placeholder="请选择">
                                <el-option label="移动开发" value="移动开发"></el-option>
                                <el-option label="网站开发" value="网站开发"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="发布时间">
                            <el-date-picker v-model="projectAllForm.publishTimeStart" type="date" placeholder="选择日期">
                            </el-date-picker>
                            <el-date-picker v-model="projectAllForm.publishTimeEnd" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" class="text-right">
                        <el-form-item>
                            <el-button type="primary" @click="fetchProjectAllList(projectAllForm)">查询</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="项目状态">
                            <el-select v-model="projectAllForm.status" placeholder="请选择">
                                <el-option label="待托管" value="待托管"></el-option>
                                <el-option label="托管中" value="托管中"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="项目专员">
                            <el-select v-model="projectAllForm.specialistId" placeholder="请选择">
                                <el-option label="张三" value="张三"></el-option>
                                <el-option label="李四" value="网站开发"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="跟进状态">
                            <el-select v-model="projectAllForm.xyz" placeholder="请选择">
                                <el-option label="跟进中" value="跟进中"></el-option>
                                <el-option label="未跟进" value="未跟进"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="完成时间">
                            <el-date-picker v-model="projectAllForm.doneStart" type="date" placeholder="选择日期">
                            </el-date-picker>
                            <el-date-picker v-model="projectAllForm.doneTimeEnd" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </template>
        <!--列表  -->
        <template>
            <el-table :data="projectAllList" border row-class-name="text-center" height="364" class="user-table" style="width:100%">
                <el-table-column show-overflow-tooltip prop="projectNo" label="项目编号">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="name" label="项目名称">
                      <template scope="scope">
                        <span @click='openEmployerDetail(scope.$index, projectAllList)' class="color02 pointer">
                            {{scope.row.name}}
                        </span>
                        <span class="isInternal-icon" v-if="scope.row.isInternal == 1">内</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="employerAccountId" label="发包方">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="publishTime" label="发布时间">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="status" label="项目状态">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="contractorAccountName" label="中标方">
                    <template scope="scope">
                        <span @click='openEmployerDetail(scope.$index, projectAllList)' class="color02 pointer">
                            {{scope.row.contractorAccountName}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="cycle" label="完成周期">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="contractSignTime" label="合同签订时间">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="contractMoney" label="合同金额">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="actualPayMoney" label="实际支出金额">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="specialistName" label="项目专员">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="doneTime" label="项目完成/结束时间" width="120">
                </el-table-column>
            </el-table>
        </template>
        <template>
            <div class="pagination-wrapper" v-if = "projectAllPagination.totalPage>1">
                <div class="fr font-14 mt-10">
                    <span class="page-num mr-25">
                        总数：<span v-text="projectAllPagination.totalCount"></span>
                        每页显示 <span v-text="projectAllPagination.pageSize"></span>
                        条 共 <span v-text="projectAllPagination.totalPage"></span> 页
                    </span>
                    <el-pagination @current-change="changeProjectAllPage" :current-page="projectAllPagination.currentPage" :page-size="projectAllPagination.pageSize"
                        layout="prev, pager, next" :total="projectAllPagination.totalCount" class="fr">
                    </el-pagination>
                </div>
            </div>
        </template>
        <!-- 发包方信息查看 -->
        <template>
            <el-dialog title="发包方信息查看" :visible.sync="employerDetailDialogStatus">
                <div>
                    <el-row>
                        <el-col :span="12">
                            <div>昵称：<span v-text="employerDetailContent.nickname"></span> </div>
                        </el-col>
                        <el-col :span="12">
                            <div>注册时间：<span v-text="employerDetailContent.createdAt"></span></div>
                        </el-col>
                    </el-row>
                    <el-row class="mt-10">
                        <el-col :span="12">
                            <div>真实名称：<span v-text="employerDetailContent.name"></span></div>
                        </el-col>
                        <el-col :span="12">
                            <div>账号状态：<span v-text="employerDetailContent.status"></span></div>
                        </el-col>
                    </el-row>
                    <el-row class="mt-10">
                        <el-col :span="12">
                            <div>联系电话： <span v-text="employerDetailContent.mobile"></span></div>
                        </el-col>
                        <el-col :span="12">
                            <div>认证状态：<span v-text="employerDetailContent.certificationStatus"></span></div>
                        </el-col>
                    </el-row>
                    <el-row class="mt-10">
                        <el-col :span="12">
                            <div>电子邮箱：<span v-text="employerDetailContent.email"></span></div>
                        </el-col>
                        <el-col :span="12">
                            <div>信用等级：<span v-text="employerDetailContent.creditScore"></span></div>
                        </el-col>
                    </el-row>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="employerDetailDialogStatus = false">关闭</el-button>
                </div>
            </el-dialog>
        </template>
    </div>
</template>
<script>
    import {
        getListAll
    } from '@/api/project.js'
    import {
        getUserAccountBasicInfo
    } from '@/api/user.js'
    export default {
        data () {
            return {
                projectAllForm: {
                    publishTimeStart: '',
                    publishTimeEnd: '',
                    xyz: '',
                    type: '',
                    specialistId: '',
                    doneStart: '',
                    doneTimeEnd: '',
                    status: ''

                },
                projectAllFormRules: {},
                projectAllList: [],
                projectAllPagination: {},

                // 发包方信息
                employerDetailDialogStatus: false,
                employerDetailContent: {

                },
                // 跟进进度
                followUpLogListDialogStatus: false,
                followUpLogList: [],
                followUpLogListPagination: {},

                // 操作记录查看
                operationLogListDialogStatus: false,
                // 操作日志列表
                operationLogList: [],
                operationLogListPagination: {},

                activeDialogData: {},
                options: [{
                    value: '跟踪无反馈',
                    label: '跟踪无反馈'
                }, {
                    value: '财务不支持',
                    label: '财务不支持'
                }, {
                    value: '已经转线下合作',
                    label: '已经转线下合作'
                }, {
                    value: '自己已解决',
                    label: '自己已解决'
                }],
                value: ''
            }
        },
        methods: {
            // 获取列表内容
            fetchProjectAllList (data, currentPage = 1, pageSize = 10) {
                let param = data || {}
                param.currentPage = currentPage
                getListAll(data).then((response) => {
                    if (response.data.code === 0) {
                        let d = response.data.data.data
                        // 转换后台数据
                        for (let i = 0; i < d.length; i++) {
                            // 项目预算
                            d[i].budget = d[i].budgetMin + ' - ' + d[i].budgetMax
                            // 项目周期
                            d[i].cycleTogether = d[i].cycle + d[i].cycleName
                        }
                        this.projectAllList = response.data.data.data
                        this.projectAllPagination = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取列表数据失败')
                    } else {
                        this.$message('未知错误')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
            // 翻页
            changeProjectAllPage (data) {
                let param = this.projectAllForm
                this.fetchProjectAllList(param, data)
            },
            // 对话框弹出，填写弹出框的显示数据
            activeDialog (index, data, isActive = false) {
                if (isActive) {
                    this.activeDialogData = data[index]
                } else {
                    this.activeDialogData = {}
                }
            },
            // 发包方详细信息
            openEmployerDetail (index, data) {
                this.activeDialog(index, data, true)
                this.employerDetailDialogStatus = true
                this.fetchUserAccountBasicInfo({
                    id: this.activeDialogData.id
                })
            },
            // 获取用户信息
            fetchUserAccountBasicInfo (data) {
                getUserAccountBasicInfo(data).then((response) => {
                    if (response.data.code === 0) {
                        this.employerDetailContent = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取用户信息失败')
                    } else {
                        this.$message('未知错误')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            }
        },
        created () {
            this.fetchProjectAllList()
        }
    }

</script>

<style scoped>
    .mt-15 {
        margin-top: 15px
    }

    .ml-05 {
        margin-left: -5px
    }

    .mr-25 {
        margin-right: 25px;
    }

</style>
